<template>
  <editable-wrapper v-bind="{ ...$attrs }">
    <!-- 预设框：不需要编辑 -->
    <a-button v-if="btn.isPreset" v-bind="{ ...btn }">{{ btn.label }}</a-button>

    <!-- 自定义框：可以编辑 -->
    <a-popover
      v-else
      :open="btn.popoverVisible"
      trigger="click"
      placement="bottom"
      @open-change="onChange({ popoverVisible: $event, dropdownVisible: !$event && false })"
    >
      <!-- 点击呈现部分 -->
      <template #content>
        <transition name="fade" mode="out-in">
          <div v-if="!btn.dropdownVisible">
            <a-input
              key="input"
              :value="btn.label"
              placeholder="按钮名称"
              class="w-30"
              @update:value="onChange({ label: $event })"
            ></a-input>
            <div key="group" class="flex flex-col space-y-2 mt-2 px-1">
              <a-checkbox :checked="btn.ghost" @update:checked="onChange({ ghost: $event })"
                >ghost</a-checkbox
              >
              <a-checkbox :checked="btn.withModal" @update:checked="onChange({ withModal: $event })"
                >模态框</a-checkbox
              >
              <a-checkbox :checked="btn.withDropdown" @update:checked="onChange({ withDropdown: $event })"
                >下拉框</a-checkbox
              >
            </div>
          </div>
          <div v-else>
            <div
              v-for="(dropItem, index) in btn.dropdownList"
              :key="dropItem.title"
              class="flex space-x-2 children:max-w-30 children:tracking-wider"
            >
              <a-input v-model:value="dropItem.title" placeholder="标题"></a-input>
              <a-input v-model:value="dropItem.key" placeholder="key 值"></a-input>
              <a-input v-model:value="dropItem.function" placeholder="触发的函数名"></a-input>
            </div>
            <a-button type="dashed" class="mt-2 w-full" @click="addDropdown"><PlusOutlined /></a-button>
          </div>
        </transition>
      </template>
      <!-- 主体 -->
      <a-button v-bind="{ ...btn }">{{ btn.label }}</a-button>
    </a-popover>

    <a-dropdown v-if="btn.withModal || btn.withDropdown" trigger="click" placement="bottomLeft">
      <a-button
        size="small"
        shape="circle"
        type="dashed"
        :icon="listIcon"
        class="flex items-center justify-center"
      >
      </a-button>
      <template #overlay>
        <a-menu @click="onSetExtra">
          <a-menu-item v-if="btn.withModal" key="modal"> 编辑模态框 </a-menu-item>
          <a-menu-item
            v-if="btn.withDropdown"
            key="dropdown"
            :class="{ 'pointer-events-none': btn.dropdownVisible }"
          >
            编辑下拉框
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </editable-wrapper>
</template>

<script setup lang="ts" name="editable-button">
import type { AnyButton, DropdownItem } from '@/form'
import { PlusOutlined } from '@ant-design/icons-vue'
import { h } from 'vue'

const props = defineProps<{
  btn: AnyButton
}>()

const emit = defineEmits<{
  (event: 'update', value: AnyButton): void
  (event: 'edit-modal'): void
  (event: 'edit-dropdown'): void
}>()

const listIcon = h('span', { className: 'i-tabler:list text-md leading-none' })

const onSetExtra = ({ key }) => {
  // prettier-ignore
  switch (key) {
    case 'modal': emit('edit-modal'); break
    case 'dropdown': onChange({ popoverVisible: true, dropdownVisible: true }); break
    default: break;
  }
}

const onChange = (domain: { [k in keyof Partial<AnyButton>]: AnyButton[k] }) => {
  emit('update', { ...props.btn, ...domain })
}

const addDropdown = () => {
  onChange({
    dropdownList: [...props.btn.dropdownList!, { title: '', key: '', function: '' }]
  })
}

// const updateDropdownItem = (index: number, prop: string, value: string) => {
//   const target = props.btn.dropdownList![index]
//   props.btn.dropdownList![index] = { ...target, [prop]: value }
//   onChange({
//     dropdownList: [...props.btn.dropdownList!]
//   })
// }
</script>

<style scoped></style>
